<script>
	var gridster;
	$(document).ready(function(){
		var width = ($("body").width()-10) / 12 ;
		gridster = $(".gridster ul").gridster({
		  widget_base_dimensions: [width, 20],
		  widget_margins: [5, 5],
		  helper: 'clone',
		  resize: {
			enabled: true ,
			stop: function (e, ui, $widget){}
		  },
		  serialize_params: function($w, wgd) {
			return {
				x: wgd.col,
				y: wgd.row,
				width: wgd.size_x,
				height: wgd.size_y,
				id: $($w).attr('id'),
				dataid: $($w).attr('data-id')
			 };
		  },
		  autogrow_cols: true,
		  draggable: {
			handle: '.design-toolbar',
			stop: function(event, ui){
				
			}
		  }
		}).data('gridster');	
	});
</script>
<div id="layout-30_30_30" class="dashboard-layout gridster ready" default-region="region-1">
	<ul style="width: auto; height: 100%; position: relative;backgroun-color:#FFFFFF;">
		<#if analyzerReport?? && analyzerReport.model??>
		<#list analyzerReport.model as reportModel>
		<li data-row="${reportModel.posy!'1'}" data-col="${reportModel.posx!'1'}" data-sizex="${reportModel.poswidth!'4'}" data-sizey="${reportModel.posheight!'12'}" class="design gs-w" data-id="${reportModel.id}" id="comp_${reportModel.id}" style="padding:0px 0px 3px 2px;display: block; position: absolute; min-width: 100px; min-height: 100px;">
			<#include "model.html"/>
		</li>
		</#list>
		</#if>									
	</ul>
</div>